<template>
  <div class="project-wrapper">
    <p class="title">{{ logoName }}</p>
    <div class="tips">
      <h4>根据您账号的权限，可以选择所属的层级进入系统</h4>
      <p>（根据选择的等级不同进入不同的系统的等级）</p>
    </div>

    <div class="select-box" ref="selects">
      <el-select class="select-item" v-model="value1">
        <el-option v-for="(item,index) in projectsTree" :key="index" :label="item.name" :value="index"></el-option>
      </el-select>
      <el-select class="select-item" v-model="value2" v-if="projectsTree[value1] && projectsTree[value1].children.length != 0">
        <el-option v-for="(item,index) in projectsTree[value1].children" :key="index" :label="item.name" :value="index"></el-option>
      </el-select>
      <el-select class="select-item" v-model="value3" v-if="projectsTree[value1].children[value2] && projectsTree[value1].children[value2].children.length != 0">
        <el-option v-for="(item,index) in projectsTree[value1].children[value2].children" :key="index" :label="item.name" :value="index"></el-option>
      </el-select>
    </div>

    <el-button type="primary" class="select-item" @click="logIn" :loading="chooseLoading">进入</el-button>
  </div>
</template>

<script lang='ts' setup>
import { reactive, ref, toRefs, nextTick, watch } from 'vue'
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { useMutations } from '@/store/hooks';
import { inject } from 'vue-demi'
import { getUrlKey } from '@/utils/utils'

const reload = inject('reload') as ()=>{}
const mutationFn = useMutations(['SET_PROJECTINFO'],'user') as { SET_PROJECTINFO:any }
const store = useStore()
const logoName = ref(import.meta.env.VITE_APP_BASE_NAME)
const chooseLoading = ref(false)
const selects = ref()
const router = useRouter()

const data = reactive({
  projectsTree:[] as Array<any>,
  value1:0,
  value2:0,
  value3:0,
})
const { value1, value2, value3, projectsTree } = toRefs(data)

const props = defineProps({
    projects:{
      type:Array,
      default:()=>[]
    }
})
const projectList = JSON.parse(JSON.stringify(props.projects))
// 进入项目
const logIn = () =>{
    let len = selects.value.children.length
    let result = data.projectsTree
    for (let i = 1; i < len; i++) {
      result = result[data['value' + i]].children
    }
    let datas = result[data['value' + len]]
    mutationFn.SET_PROJECTINFO({
      name:datas.name,
      deptId:datas.deptId,
      address:datas.extraValue,
      logo:data.projectsTree[data.value1].extraValue,
      companyName:data.projectsTree[data.value1].name,
    })
    chooseLoading.value = true
    store.dispatch('user/getMenuList').then(() => {
      chooseLoading.value = false
      // this.$emit('close')
      if(router.currentRoute.value.name == 'home'){
        reload()
        return false
      }else{
        if(!getUrlKey('unity')){
          router.push({name:'home'})
        }
      }
    }).catch(()=>{chooseLoading.value = false})
    //获取该项目全部设备
    store.dispatch('user/getALLDeviceList').then(()=>{
    }).catch(()=>{chooseLoading.value = false})
}
const buildTree = (list:Array<any> = [],pid:number = 0) => {
  projectList.map((item:any) => {
      if (item.parentId === pid) {
        if (!item.children) {
          item.children = []
        }
        item.children = buildTree([], item.deptId)
        list.push(item)
      }
    })
    return list
}
const setDefaultPro = () :void => {
    nextTick(()=>{
      let len = selects.value.children.length
      let result = data.projectsTree
      for (let i = 1; i < len; i++) {
          if(result[data['value' + i]]){
              result = result[data['value' + i]].children
          }
      }
      let datas = result[data['value' + len]]
      mutationFn.SET_PROJECTINFO({
        name:datas.name,
        deptId:datas.deptId,
        address:datas.extraValue,
        logo:data.projectsTree[data.value1].extraValue,
        companyName:data.projectsTree[data.value1].name,
      })
    })
}
watch(
    props.projects,(val)=>{
      if(val.length > 0){
        data.projectsTree = buildTree()
        data.value1 = data.projectsTree.length > 1 ? 1 : 0
        setDefaultPro()
      }
    }, {
      immediate: true,
      deep: false
    }
)
</script>

<style lang='scss' scoped>
.project-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  .title{
    font-size: 25px;
    font-weight: bold;
  }
  .logo{
    width:200px;
  }
  .tips{
    text-align: center;
    margin: 20px 0;
    h4{
      margin: 0 0 5px;
      font-size: 15px;
    }
    p{
      font-size: 12px;
      margin: 0;
    }
  }
  .select-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
  }
  :deep(.select-item){
    width: 260px;
    height: 40px;
    margin-bottom: 16px;
  }
}
</style>
